<script lang="ts" setup>
import { reactive, ref } from 'vue';
import type { Edge, EdgeChange, Node, NodeChange } from '@vue-flow/core';
import { NLayout, NLayoutContent, NLayoutHeader, NLayoutSider } from 'naive-ui';
import { getDefaultLabel } from '@/utils/flow';
import type { Process } from '@/typings/flow/flow';
import PorFlowHeader from './por-flow-header.vue';
import PorFlowComponent from './por-flow-component.vue';
import PorFlowProperty from './por-flow-property.vue';
import PorFlowCanvas from './por-flow-canvas.vue';

// 状态管理
const nodes = ref<Node[]>([]);
const edges = ref<Edge[]>([]);
const selectedNode = ref<Node | null>(null);
const selectedEdge = ref<Edge | null>(null);
const flowProps = reactive<Process>({
  name: '未命名流程',
  description: '',
  variables: []
});

// 处理添加节点
const handleAddNode = (nodeType: string, position: { x: number; y: number }) => {
  console.log(nodeType);

  const newNode: Node = {
    id: `node-${Date.now()}`,
    type: nodeType,
    position,
    data: { label: getDefaultLabel(nodeType) }
  };
  nodes.value.push(newNode);
};

// 处理节点点击
const handleNodeClick = (node: Node) => {
  selectedNode.value = node;
  selectedEdge.value = null;
};

// 处理边点击
const handleEdgeClick = (edge: Edge) => {
  selectedEdge.value = edge;
  selectedNode.value = null;
};

// 事件处理函数
const handleUndo = () => {
  console.log('执行撤销操作');
};

const handleRedo = () => {
  console.log('执行重做操作');
};

const handleSave = () => {
  console.log('执行保存操作');
};

const handleExport = () => {
  console.log('执行导出操作');
};

const handleNodesChange = (_changes: NodeChange[]) => {
  // vueFlow.setNodes(nodes => applyNodeChanges(changes, nodes));
};

const handleEdgesChange = (_changes: EdgeChange[]) => {
  // vueFlow.setEdges(edges => applyEdgeChanges(changes, edges));
};

// 其他方法实现...
</script>

<template>
  <NLayout class="h-screen">
    <!-- 顶部工具栏 -->
    <NLayoutHeader bordered>
      <PorFlowHeader @undo="handleUndo" @redo="handleRedo" @save="handleSave" @export="handleExport" />
    </NLayoutHeader>
    <!-- 左侧组件面板 -->

    <NLayout has-sider>
      <NLayoutSider bordered collapse-mode="width" :collapsed-width="64" :width="100">
        <PorFlowComponent />
      </NLayoutSider>
      <NLayoutContent>
        <NLayout has-sider sider-placement="right">
          <!-- 中间画布区域 -->
          <NLayoutContent>
            <PorFlowCanvas
              ref="canvasRef"
              :nodes="nodes"
              :edges="edges"
              @node-click="handleNodeClick"
              @edge-click="handleEdgeClick"
              @nodes-change="handleNodesChange"
              @edges-change="handleEdgesChange"
              @add-node="handleAddNode"
            />
          </NLayoutContent>

          <!-- 右侧属性面板 -->
          <NLayoutSider bordered collapse-mode="width" :collapsed-width="0" :width="300" show-trigger>
            <PorFlowProperty :selected-node="selectedNode" :selected-edge="selectedEdge" :flow-props="flowProps" />
          </NLayoutSider>
        </NLayout>
      </NLayoutContent>
    </NLayout>
  </NLayout>
</template>
